<template>
  <div>
    <el-card>
      <div slot="header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: homePath }">场图管理</el-breadcrumb-item>
          <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 操作按钮 -->
      <el-row class="m-b">
         <el-button type="primary" size="small" @click="updateUser()">
           <i class="el-icon-user"></i> 分配用户
         </el-button>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card>
            <el-tag type="info" effect="plain">管理员</el-tag>
            <el-table stripe :data="owners" style="width: 100%; font-size: 14px;" size="mini">
              <el-table-column prop="name" label="用户名" min-width="140" sortable />
              <el-table-column prop="displayName" label="昵称" min-width="140"/>
              <el-table-column prop="email" label="邮箱" min-width="200" show-overflow-tooltip />
              <el-table-column prop="state" label="状态" min-width="100">
                <template #default="{ row }">
                  <el-tag :type="row.state | stateFilter">{{ row.state | stateFil}}</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <el-tag type="info" effect="plain">普通用户</el-tag>
            <el-table stripe :data="customers" style="width: 100%; font-size: 14px;" size="mini">
              <el-table-column prop="name" label="用户名" min-width="140" sortable />
              <el-table-column prop="displayName" label="别名" min-width="140"/>
              <el-table-column prop="email" label="邮箱" min-width="200" show-overflow-tooltip/>
              <el-table-column prop="state" label="状态" min-width="100">
                <template #default="{ row }">
                  <el-tag :type="row.state | stateFilter">{{ row.state | stateFil}}</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
      <el-row style="text-align: center;margin-top:20px;">
        <el-button type="default" icon="el-icon-back" @click="goBack">返 回</el-button>
      </el-row>
    </el-card>
    <edit-form :show-dialog="showDialog" :owner-names="ownerNames" :customer-names="customerNames" @changeVisible="changeVisible" @getList="getList"/>
  </div>
</template>
<script>
import { sceneUser } from "@/api/sceneManage";
import editForm from "@/views/sceneManage/user/updateUser";
export default {
  components: {
    editForm
  },
  data() {
    return {
      fieldPatternId: "",
      tableData: [{}],
      showDialog: false,
      owners: [],
      ownerNames: [],
      customers: [],
      customerNames: [],
      homePath: "/sceneManage",
      page: 1,
      search: {}
    };
  },
  filters: {
    stateFil(val) {
      switch (val) {
        case "NEW":
          return "新注册";
        case "ACTIVE":
          return "激活";
        case "DISABLE":
          return "禁用";
        default:
          break;
      }
    },
    stateFilter(state) {
      const stateMap = {
        ACTIVE: "success",
        DISABLE: "danger",
        NEW: ""
      };
      return stateMap[state];
    }
  },
  created() {
    this.fieldPatternId = this.$route.query.fieldPatternId;
    this.page = this.$route.query.page;
    this.search = this.$route.query.search;
    this.homePath = `${this.homePath}?page=${this.page}&search=${this.search}`;
  },
  mounted() {
    this.fieldPatternId = this.$route.query.fieldPatternId;
    this.getList();
  },
  methods: {
    goBack() {
      this.$router.push(this.homePath);
    },
    getList() {
      sceneUser(this.fieldPatternId).then(res => {
        this.owners = res.value.owners;
        this.customers = res.value.customers;
        for (let i = 0; i < res.value.owners.length; i++) {
          this.ownerNames[i] = res.value.owners[i].name;
        }
        for (let i = 0; i < res.value.customers.length; i++) {
          this.customerNames[i] = res.value.customers[i].name;
        }
      });
    },
    changeVisible(e) {
      this.showDialog = e;
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.getList();
    },
    updateUser() {
      this.changeVisible(true);
    }
  }
};
</script>
<style lang="scss" scoped></style>
